<template>
    <div class="page-container">
		<el-form :inline="true" :model="search" size="small" ref="searchForm">
				<el-form-item label="卡项名称:" >
					<el-input placeholder="请输入卡项名称" v-model="search.cardName" @change="filterSubmit" clearable></el-input>
				</el-form-item>
				<el-form-item label="状态:" >
					<el-select v-model="search.status"   placeholder="请选择状态"  @change="filterSubmit" clearable>
					    <el-option
					      v-for="item in statusOptions"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
					    />
					  </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="filterSubmit">查询</el-button>
					<el-button @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		
        <el-row>
            <el-button size="small" type="primary" @click="add">添加卡项</el-button>
        </el-row>
        <div class="table-list">
            <el-table :data="list" size="small">
                <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                <el-table-column label="卡项名称" prop="cardName"></el-table-column>
				<el-table-column label="销售金额(元)" prop="cardPrice"></el-table-column>
				<el-table-column label="分销金(元)" prop="saleMoney"></el-table-column>
                <el-table-column label="使用次数" prop="isUseNum">
                   <template #default="scope">
                        <el-tag effect="light" size="small"   v-if="scope.row.isUseNum == '0'">不限制</el-tag>
						<span  v-if="scope.row.isUseNum == '1'">{{scope.row.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="使用时间" prop="isUseDate">
                    <template #default="scope">
						<el-tag effect="light" size="small"   v-if="scope.row.isUseDate == '0'">不限制</el-tag>
						<span  v-if="scope.row.isUseDate == '1'">{{scope.row.dateNum}} 天</span>
                    </template>
                </el-table-column>
                <el-table-column label="详情" prop="detail" width="320px">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="480" trigger="hover" :content="scope.row.detail">
                            <template #reference>
                                <text class="text-hide">
                                    {{ scope.row.detail }}
                                </text>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
				<el-table-column label="购买时间" prop="buyTimeType" width="300px">
				   <template #default="scope">
						<el-tag effect="light" size="small"   v-if="scope.row.buyTimeType == '0'">不限制</el-tag>
						<span  v-if="scope.row.buyTimeType == '1'">{{scope.row.startBuyTime}} 至  {{scope.row.endBuyTime}}</span>
				    </template>
				</el-table-column>
                <el-table-column label="状态" prop="status">
                    <template #default="scope">
                        <el-switch size="small" v-model="scope.row.status" :active-value="'0'" :inactive-value="'1'"
                            :active-text="scope.row.status == 1 ? '关闭' : '开启'"
                            ></el-switch>
							<!-- @change="changeStatus(scope.row)" -->
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link size="small" @click="editRow(scope.row)">修改</el-button>
                        <el-button type="primary" link size="small" @click="delRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-block">
            <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
                :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                :total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <card-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="form" :title="title"
            @onDetailSubmit="onDetailSubmit"></card-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted } from 'vue'
import CardDetail from '../components/CardDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList, get, updateStatus, remove } from '/@/api/pms/card'
import api from '/@/api/commonApi'
export default {
    name: 'Logistic',
    components: {
        CardDetail
    },
    setup() {
        const state = reactive({
            list: [],
            search: {
                current: 1,
                size: 10
            },
            title: '新增运费模板',
            form: {},
            dialogFormVisible: false,
            total: 100,
            current: 1,
            page: 10,
			statusOptions:[
				{
				    value: '0',
				    label: '开启',
				  },
				  {
				    value: '1',
				    label: '关闭',
				  },
			]
        })
        const add = () => {
            restForm()
            state.title = '新增卡项'
            state.dialogFormVisible = true
        }
        const editRow = row => {
            state.title = '编辑卡项'
            get(row.id).then(res => {
                state.form = res.data
                state.form.status = parseInt(res.data.status)
                state.form.isUseNum = parseInt(res.data.isUseNum)
                state.form.num = parseInt(res.data.num)
                state.form.isUseDate = parseInt(res.data.isUseDate)
				 state.form.dateNum = parseInt(res.data.dateNum)
				  state.form.buyTimeType = parseInt(res.data.buyTimeType)
            })
            state.dialogFormVisible = true
        }
        const restForm = () => {
            state.form = {
                id: null,
				cardName:'',
				status:0,
				isUseNum:0,
				num:0,
				isUseDate:0,
				dateNum:0,
				buyTimeType:0,
				endBuyTime:'',
				startBuyTime:'',
				cardVolumeSkuRelation:[],
				cardPrice: 0.00,
                saleMoney: 0,
                detail: ''
            }
        }
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.cardName + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }
        const getList = () => {
            api.cardWork(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        const onDetailSubmit = () => {
            getList()
            state.dialogFormVisible = false
        }
        const changeStatus = (row) => {
            updateStatus({ id: row.id, status: row.status }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('修改成功')
                    getList()
                } else {
                    ElMessage.error('修改失败:' + res.message)
                }
            })
        }
		const filterSubmit = ()=>{
			state.search.current = 1
			 getList()
		}
		const reset = ()=>{
			state.search = {
			    current: 1,
			    size: 10,
				cardName:'',
				status: ''
			}
			getList()
		}
        onMounted(() => {
            getList()
        })
        return {
            add,
            editRow,
            delRow,
            handleSizeChange,
            handleCurrentChange,
            onDetailSubmit,
            restForm,
            changeStatus,
			filterSubmit,
			reset,
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.page-container {
    .table-list {
        background: var(--next-color-white);
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}

.text-hide {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
</style>